<template>
  <a
    href="javascript:void(0)"
    class="flex fixed bottom-8 left-auto right-8 z-[999] h-10 w-10 items-center justify-center rounded-md bg-primary text-white shadow-md transition duration-300 ease-in-out hover:bg-dark"
    v-if="isShow"
    @click="toTop"
  >
    <span
      class="mt-[6px] h-3 w-3 rotate-45 border-l border-t border-white"
    ></span>
  </a>
</template>

<script setup lang="ts">
import { useSharedWindowScroll } from "@/hooks/useSharedWindowScroll";
const isShow = ref(false);
let toTop = () => {};

onMounted(() => {
  const { y } = useSharedWindowScroll();
  watch(y, (newV) => (isShow.value = newV > 50), { immediate: true });
  toTop = () => (y.value = 0);
});
</script>

<style scoped lang="scss"></style>
